<template>
  <div class="classigy" @mouseleave="handleMouseLeave">
    <div class="classify_list">
      <ul class="classify_list_ul">
        <li
          v-for="(item, index) in pcGoodsCatView"
          :key="item.id"
          @mouseenter="handleHover(index)"
          :class="{ active: activeIndex === index }"
        >
          {{ item.catName }}<img src="@/assets/recommend/left.png" />
        </li>
      </ul>
    </div>

    <div
      class="classigy_right_wrapper"
      v-if="activeIndex !== null && pcGoodsCatView[activeIndex]"
      :style="{ height: rightPanelHeight }"
    >
      <div class="classigy_right">
        <div class="classigy_right_item">
          <div
            class="classigy_right_item1"
            v-if="pcGoodsCatView[activeIndex].children[0]"
          >
            <div class="children-list">
              <h3 class="section-title">
                {{ pcGoodsCatView[activeIndex].children[0].catName }}
              </h3>
              <div class="children-items">
                <div
                  v-for="child in pcGoodsCatView[activeIndex].children[0]
                    .children"
                  :key="child.id"
                  class="child-item"
                >
                  <img :src="child.imgUrl" alt="" class="child-icon" />
                  <span class="child-name">{{ child.catName }}</span>
                </div>
              </div>
            </div>
          </div>

          <div
            class="classigy_right_item2"
            v-if="pcGoodsCatView[activeIndex].children[1]"
          >
            <div class="children-list">
              <h3 class="section-title">
                {{ pcGoodsCatView[activeIndex].children[1].catName }}
              </h3>
              <div class="children-items">
                <div
                  v-for="child in pcGoodsCatView[activeIndex].children[1]
                    .children"
                  :key="child.id"
                  class="child-item"
                >
                  <img :src="child.imgUrl" alt="" class="child-icon" />
                  <span class="child-name">{{ child.catName }}</span>
                </div>
              </div>
            </div>
          </div>

          <div
            class="classigy_right_item3"
            v-if="
              pcGoodsCatView[activeIndex].bannerViewList &&
              pcGoodsCatView[activeIndex].bannerViewList.length
            "
          >
            <div class="banner-section">
              <h3 class="section-title">推荐商品</h3>
              <div class="banner-list">
                <img
                  v-for="(banner, idx) in pcGoodsCatView[
                    activeIndex
                  ].bannerViewList.slice(0, 3)"
                  :key="idx"
                  :src="banner.imgUrl"
                  alt="推荐商品"
                  class="banner-img"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPcGoodsCat } from "@/api";
export default {
  name: "Classify",
  data() {
    return {
      pcGoodsCatView: [], //分类数据数组
      activeIndex: null,
      rightPanelHeight: "520px",
    };
  },
  async created() {
    try {
      const response = await getPcGoodsCat();
      this.pcGoodsCatView = response.result.pcGoodsCatView;
    } catch (error) {
      console.error("加载商品数据失败:", error);
    }
  },
  methods: {
    handleHover(index) {
      this.activeIndex = index;
    },
    handleMouseLeave() {
      this.activeIndex = null;
    },
  },
};
</script>

<style scoped>
.classigy {
  display: flex;
  width: 1000px;
  height: 520px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.classify_list {
  width: 200px;
  background-color: #ffffff;
}

.classify_list_ul {
  width: 200px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: start;
  padding: 0;
  margin: 0;
  list-style: none;
}

.classify_list_ul li {
  width: 175px;
  height: 45px;
  padding: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.classify_list_ul li:hover,
.classify_list_ul li.active {
  background-color: #d6d8da;
  color: #0099a8;
}

.classify_list_ul li:first-child {
  margin-top: 16px;
}

.classify_list_ul li:last-child {
  margin-bottom: 16px;
}
.section-title {
  text-align: start;
}
.classigy_right_wrapper {
  width: 800px;
  height: 100%;
  background-color: white;
  overflow-y: auto;
}

.classigy_right {
  padding: 16px 20px;
  height: 100%;
  box-sizing: border-box;
}

.classigy_right_item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 100%;
}
.classigy_right_item1,
.classigy_right_item2,
.classigy_right_item3 {
  margin: 10px;
  padding: 10px;
}
.children-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.child-item {
  width: calc(25% - 10px);
  min-width: 0;
  padding: 6px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 4px;
}

.child-icon {
  width: 46px;
  height: 46px;
  margin-right: 6px;
  object-fit: contain;
  border-radius: 4px;
  background-color: #fafafa;
}

.child-name {
  font-size: 17px;
  color: #333;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: start;
}

.banner-section {
  margin-top: 8px;
}

.banner-list {
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.banner-img {
  width: 200px;
  height: 130px;
  object-fit: fill;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 0;
}

.banner-img:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>